<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部 -->
      <el-row type="flex" justify="space-between">
        <el-col>
        <!-- 搜索列表 -->
          <el-form label-width="80px" :inline="true">
            <!-- 关键字 -->
            <el-form-item label="关键字">
              <el-input v-model="keyword" />
              <!-- 状态 -->
            </el-form-item >
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="state" @change="changeState">
                <el-option
                  label="可用"
                  value="1"
                />
                <el-option
                  label="禁用"
                  value="0"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="delForm">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
        <!-- 新增技巧按钮 -->
          <el-button type="success" class="addTips" icon="el-icon-edit" @click="add">新增技巧</el-button>
        </el-col>
      </el-row>

      <!-- 提示 -->
        <el-alert
          :title="`数据-共${page.total}条`"
          type="info"
          show-icon
          :closable="false">
        </el-alert>
      <!-- 表格 -->
      <el-table
        class="artTab"
        :data="list"
        style="width: 100%">
        <el-table-column label="序号" type="index" :index="indexMethod" />
        <el-table-column label="文章标题" icon="el-icon-film" prop="title">
          <template v-slot="{ row }">
            {{ row.title }}
            <i
            :class="{ 'el-icon-film': row.videoURL ? true : false }"
            @click="playVideo(row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits" />
        <el-table-column label="录入人" prop="username" />
        <el-table-column label="录入时间" >
          <template v-slot="{ row }">
            {{ row.createTime | time }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="showPreviewFn(row)">预览</el-button>
            <el-button type="text" @click="editState(row)">{{row.state === 1 ? '禁用' : '启用'}}</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="edit(row)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
    <el-pagination
      background
      style="float: right;"
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.pageSize"
      :total="page.total"
      layout="prev, pager, next, sizes, jumper"
      @current-change="changePage"
      @size-change="changeSize"
      />
      <!-- 视频播放窗口 -->
      <!-- <div class="video">
        <el-dialog :visible.sync="showViedo" width="40%" destroy-on-close>
          <video :src="videoURL" muted controls autoplay style="width: 120%; height: 120%"/>
        </el-dialog>
      </div> -->
      <div class="video-preview" v-if="showViedo">
        <div class="close" @click="closeVideo()"><span class="el-icon-close"></span></div>
        <div class="box">
          <video :src="videoURL" muted controls autoplay></video>
        </div>
      </div>
      <!-- 文章预览弹窗 -->
      <ArticlesPreview
        :visible.sync="showPreview"
        :nodeData="nodeData"
      />
      <!-- 文章添加弹窗 -->
      <ArticlesAdd
        :visible.sync="showAdd"
        :nodeData.sync="nodeDataBack"
        @getList="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'
import ArticlesPreview from '@/module-hmmm/components/articles-preview-s.vue'
import ArticlesAdd from '@/module-hmmm/components/articles-add-s.vue'

export default {
  name: 'articles',
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  data () {
    return {
      list: [],
      keyword: null,
      state: null,
      page: {
        currentPage: 1,
        pageSizes: [5, 10, 15, 20],
        pageSize: 10,
        total: 10
      },
      showViedo: false,
      showPreview: false,
      showAdd: false,
      videoURL: '',
      nodeData: {},
      nodeDataBack: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 索引规则
    indexMethod (index) {
      return index + (this.page.currentPage - 1) * this.page.pageSize + 1
    },
    // 清除关键字,状态
    delForm () {
      this.keyword = null
      this.state = null
      // this.getList()
    },
    // 下拉框变化状态
    changeState () {
      // console.log(this.state)
      // this.page.currentPage = 1
      // this.getList()
    },
    // 搜索按钮
    search () {
      this.page.currentPage = 1
      this.getList()
    },
    // 获取文章列表
    async getList () {
      const { data } = await list({
        page: this.page.currentPage,
        pagesize: this.page.pageSize,
        keyword: this.keyword,
        state: this.state
      })
      this.list = data.items
      this.page.total = +data.counts
      this.page.pageSize = +data.pagesize
    },
    // 页数改变
    changePage (value) {
      // console.log(value)
      this.page.currentPage = value
      this.getList()
    },
    // 每页条数改变
    changeSize (value) {
      // console.log(value)
      this.page.pageSize = value
      this.getList()
    },
    // 点击播放视频
    playVideo (url) {
      this.showViedo = true
      this.$nextTick()
      // console.log(url)
      this.videoURL = url
    },
    // 点击关闭视频
    closeVideo () {
      this.showViedo = false
    },
    // 显示预览框
    showPreviewFn (row) {
      // console.log(row)
      this.showPreview = true
      this.nodeData = row
    },
    // 启用禁用
    async editState (row) {
      // console.log(row.id, row.state)
      // const state = row.state === 1 ? 0 : 1
      // const id = row.id
      // console.log({ id: row.id, state: row.state === 1 ? 0 : 1 })
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      if (this.list.length === 1) {
        this.page.currentPage--
      }
      // console.log(res, '返回')
      // this.state = row.state === 1 ? 0 : 1
      this.getList()
      this.$message.success('操作成功')
    },
    // 删除文章
    async del (id) {
      await this.$confirm('此操作将永远删除文章，是否继续？', '提示', { type: 'warning' })
      if (this.list.length === 1) {
        this.page.currentPage--
      }
      await remove({ id })
      this.$message('删除成功')
      this.getList()
    },
    // 新增文章
    add () {
      this.showAdd = true
    },
    // 修改文章
    edit (row) {
      // console.log(row)
      this.nodeDataBack = row
      this.showAdd = true
    }
  },
  filters: {
    // 时间过滤器
    time (input) {
      if (input) {
        return input.replace(input.slice(-5), '').replace(/[a-z,A-Z]/, ' ')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .container {
    margin: 10px;
    position: relative;
    .box-card {
      padding: 5px 10px;
      // 消息提示
      .addTips {
        float: right;
      }
      // 列表展示
      .artTab {
        margin: 10px 0;
        .el-icon-film {
          color: blue;
        }
      }
      // 弹出视频
      // .video {
      //   ::v-deep {
      //     .el-dialog__header {
      //       display: none;
      //     }
      //     .el-dialog__body {
      //       padding: 0;
      //     }
      //   }
      // }
      .video-preview{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.3);
        overflow: hidden;
        z-index: 9999;
        .close{
          width: 50px;
          height: 50px;
          position: absolute;
          top: 30px;
          left: 50%;
          transform: translate(-50%,0);
          background: rgba(0,0,0,0.4);
          box-shadow: 0 0 5px rgba(0,0,0,0.4);
          border-radius: 50%;
          text-align: center;
          line-height: 50px;
          color: #fff;
          font-size: 20px;
        }
        .box{
          width: 800px;
          height: 600px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          video{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
